<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref, watch} from 'vue'
import VerificationCode from "@/components/login/VerificationCode.vue";
import {showSuccessToast} from 'vant'

const step = ref(0)  // 注册步骤
const router = useRouter()
const email = ref('') // 邮箱
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 邮箱正则
const code = ref('')  // 验证码
const username = ref('')  // 用户名
const password = ref('')  // 密码
const confirmPassword = ref('')  // 确认密码
const codeErrorInfo = ref('')
const type = ref(0)

const sendCode = () => {
  showSuccessToast("发送验证码成功")
  step.value = 1
}

// 确认身份类型
const confirmType = () => {
  step.value = 3
}

// 注册表单提交
const register = () => {
}

watch(code, (newVal) => {
  if (newVal.length == 6 && newVal !== '123456') {
    codeErrorInfo.value = '验证码错误'
  } else if (newVal === '123456') {
    step.value = 2
  } else {
    codeErrorInfo.value = ''
  }
})

</script>

<template>
  <div class="container">

    <VanImage src="src/assets/icon/car-bg.svg" style="width: 80vw;margin-top: 20px;"/>

    <div v-if="step === 0">
      <VanForm @submit="sendCode" style="margin-top: 6vh;">
        <VanSpace direction="vertical" style="width: 100vw;padding: 0 6vw" size="16px">
          <van-field
              v-model="email"
              type="email"
              name="email"
              size="large"
              autocomplete="off"
              placeholder="请输入邮箱注册"
              :rules="[{ required: true, message: '请填写邮箱' },{pattern, message: '邮箱格式不正确'}]"
          />
          <van-button block type="primary" native-type="submit">提交</van-button>
          <van-button block type="default" @click="router.push('/login')">返回登录</van-button>
        </VanSpace>
      </VanForm>
    </div>

    <div v-if="step === 1" style="width: 100vw;padding: 0 6vw;margin-top: 6vh;">
      <VerificationCode :error-info="codeErrorInfo" :email="email" v-model="code"/>
    </div>

    <div class="identity-container" v-if="step === 2">
      <h1 class="identity-title">请选择您的身份</h1>
      <VanSpace size="6vw">
        <div class="identity-item" @click="type = 0">
          <VanImage src="src/assets/icon/teacher.svg"
                    :class="['identity-item-img',{'identity-item-selected':type === 0}]"/>
          <span class="identity-item-name">教练</span>
        </div>
        <div class="identity-item" @click="type = 1">
          <VanImage src="src/assets/icon/student.svg"
                    :class="['identity-item-img',{'identity-item-selected':type === 1}]"/>
          <span class="identity-item-name">学员</span>
        </div>
      </VanSpace>
      <VanButton type="primary" class="identity-btn" @click="confirmType">确认</VanButton>
    </div>

    <div class="identity-container" v-if="step === 3">

      <van-form @submit="register" class="login-box-form">
        <VanSpace direction="vertical" style="width: 80vw;" size="1rem">
          <van-field
              v-model="username"
              name="username"
              label="用户名"
              size="large"
              placeholder="用户名"
              autocomplete="off"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              size="large"
              placeholder="密码"
              autocomplete="off"
              :rules="[{ required: true, message: '请填写密码' }]"
          />

          <van-field
              v-model="confirmPassword"
              type="password"
              name="password"
              label="确认密码"
              size="large"
              placeholder="确认密码"
              autocomplete="off"
              :rules="[{ required: true, message: '请填写确认密码' }]"
          />
          <VanButton native-type="submit" type="primary" block>注册</VanButton>
        </VanSpace>
      </van-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  background-color: var(--jvyou-school-background-color);
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.identity-title {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 4vh;
}

.identity-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .identity-btn {
    width: 70vw;
    margin-top: 6vh;
  }
}

.identity-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  &-img {
    width: 30vw;
    margin-top: 6vh;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  &-selected {
    border: 3px solid #1a8afa;
  }

  &-name {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1em;
  }
}
</style>
